<template>
    <div class="update">
        <div class="form">
            <el-form label-width="100px" :model="form" ref="form" :rules="rules">
                <el-form-item prop="password" label="原密码">
                    <el-input :type="inputType1" size="small" v-model="form.password" placeholder="请输入原密码"
                        @blur="handleBlur1" @focus="handleFoucs1">
                        <i v-show="isShow1" class="el-icon-view el-input__icon" slot="suffix" @click="handleIconClick1">
                        </i>
                    </el-input>
                </el-form-item>
                <el-form-item prop="newPassword" label="新密码">
                    <el-input :type="inputType2" size="small" v-model="form.newPassword" placeholder="请输入新密码"
                        @blur="handleBlur2" @focus="handleFoucs2">
                        <i v-show="isShow2" class="el-icon-view el-input__icon" slot="suffix" @click="handleIconClick2">
                        </i>
                    </el-input>
                </el-form-item>
                <el-form-item prop="renewPassword" label="确认新密码">
                    <el-input :type="inputType3" size="small" v-model="form.renewPassword" placeholder="请再次输入新密码"
                        @blur="handleBlur3" @focus="handleFoucs3">
                        <i v-show="isShow3" class="el-icon-view el-input__icon" slot="suffix" @click="handleIconClick3">
                        </i>
                    </el-input>
                </el-form-item>
            </el-form>
        </div>
        <div class="btn">
            <el-button type="primary" size="small" @click="submitForm('form')">确认修改</el-button>
        </div>
    </div>
</template>
<script>
import { mapMutations } from 'vuex'
export default {
    name: 'UpdatePassword',
    components: {

    },
    mixins: [],
    props: {

    },
    data() {
        return {
            form: {
                password: '',
                newPassword: '',
                renewPassword: ''
            },
            rules: {
                password: [{ required: true, trigger: 'blur', message: '原密码不能为空！' }],
                newPassword: [{ required: true, trigger: 'blur', message: '新密码不能为空！' }],
                renewPassword: [{ required: true, trigger: 'blur', message: '确认新密码不能为空！' }],
            },
            isShow1: false,
            inputType1: 'password',
            isShow2: false,
            inputType2: 'password',
            isShow3: false,
            inputType3: 'password',
        }
    },
    computed: {

    },
    watch: {

    },
    mounted() {

    },
    methods: {
        ...mapMutations('userStore', ['updatePassword']),
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.updatePassword(this.form)
                    // alert('submit!');
                    this.form = {}
                } else {
                    return false;
                }
            });
        },
        // 点击字体图标
        handleIconClick1() {
            this.inputType1 = 'text'
        },
        // 失去焦点时触发
        handleBlur1() {
            if (this.form.password !== '') {
                this.isShow1 = true
            } else {
                this.isShow1 = false
            }
        },
        // 获取焦点时触发
        handleFoucs1() {
            this.isShow1 = true
        },
        // 点击字体图标
        handleIconClick2() {
            this.inputType2 = 'text'
        },
        // 失去焦点时触发
        handleBlur2() {
            if (this.form.newPassword !== '') {
                this.isShow2 = true
            } else {
                this.isShow2 = false
            }
        },
        // 获取焦点时触发
        handleFoucs2() {
            this.isShow2 = true
        },
        // 点击字体图标
        handleIconClick3() {
            this.inputType3 = 'text'
        },
        // 失去焦点时触发
        handleBlur3() {
            if (this.form.renewPassword !== '') {
                this.isShow3 = true
            } else {
                this.isShow3 = false
            }
        },
        // 获取焦点时触发
        handleFoucs3() {
            this.isShow3 = true
        },
    }
};
</script>
<style lang='less' scoped>
.update {
    width: 50%;
    background-color: white;

    .form {
        padding: 10px 50px 10px 20px;

        .el-form-item {
            margin-bottom: 15px !important;

            .el-icon-view {
                font-size: 16px;
            }

            .el-icon-view:hover {
                color: #11A983 !important;
            }
        }
    }

    .btn {
        display: flex;
        justify-content: center;
        padding-bottom: 20px;

        .el-button--primary {
            color: white;
            background-color: #11A983;
        }
    }
}
</style>